<template>
  <div>
    <!--搜索查询-->
    <el-row>
      <el-col :span="3"
        ><el-input
          v-model="searchForm.name"
          size="mini"
          clearable
          placeholder="请输姓名"
        ></el-input
      ></el-col>
      <el-col :span="3"
        ><el-input
          v-model="searchForm.username"
          size="mini"
          clearable
          placeholder="请输用户名"
        ></el-input
      ></el-col>
      <el-col :span="3"
        ><el-input
          v-model="searchForm.email"
          size="mini"
          clearable
          placeholder="邮箱"
        ></el-input
      ></el-col>
      <el-col :span="3"
        ><el-input
          v-model="searchForm.phoneNum"
          size="mini"
          clearable
          placeholder="电话"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" size="mini"  @click="search()" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" size="mini"  @click="flush()" icon="el-icon-loading">刷新</el-button>
      </el-col
      >
    </el-row>

    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="用户头像">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.headPic"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户姓名"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          align="center"
          label="用户名"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="memberLevel" width="150" align="center" label="会员级别">
        </el-table-column>
        <el-table-column prop="accountBalance" width="150" align="center" label="账户余额">
        </el-table-column>
        <el-table-column prop="integration" width="150" align="center" label="积分">
        </el-table-column>
        <el-table-column prop="licenseNo" width="180" align="center" label="驾照号">
        </el-table-column>
        <el-table-column prop="email" width="180" align="center" label="邮箱">
        </el-table-column>
        <el-table-column prop="phoneNum" width="180" align="center" label="电话">
        </el-table-column>
        <el-table-column prop="idType" width="180" align="center" :formatter="zjFormat" label="证件类型">
        </el-table-column>
        <el-table-column prop="idCard" width="180" align="center" label="身份证号">
          <template slot-scope="scope">{{scope.row.idCard? scope.row.idCard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}</template>
        </el-table-column>
        <el-table-column prop="address" width="180" align="center" label="地址">
        </el-table-column>
        <el-table-column prop="contactName" width="180" align="center" label="联系人">
        </el-table-column>
        <el-table-column prop="contactAddress" width="280" align="center" label="联系地址">
        </el-table-column>
        <el-table-column
          prop="contactPhone"
          label="联系人电话"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="sex" :formatter="sexFormat" label="性别">
        </el-table-column>
        <el-table-column prop="status" :formatter="zhFormat" label="账号状态">
        </el-table-column>
        <el-table-column width="150" label="用户状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value=0
              :inactive-value=1
              active-text="启用"
              inactive-text="禁用"
              @change="handleChangeStatus(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <!--分页插件-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      tableData: [],
      imgUrl: "",
      currentPage: 1, //页码 第几页
      pageSize: 5, //每页显示数量
      total: 100, //总条数
      searchForm: {}, //搜索form表单
      dialogFormVisible: false, //是否显示对话框  默认是不显示
      form: { passold: "", pass: "", checkPass: "" },
      formLabelWidth: "120px",
      condition: "",
    };
  },
  created() {
    //初始化方法 类似于jquery  $({})
    this.loadData();
  },
  //所有函数
  methods: {
    //加载数据
    loadData() {
      this.$http.post("/member/membercontroller/member?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(resp=>{
        if (resp.data.code==2000){
          console.log(resp)
          this.tableData=resp.data.data.list;
          this.total=resp.data.data.total;

        }
      })

    },
    zjFormat(row, column, cellValue, index){
      return cellValue == "1" ? "身份证" : cellValue == "2" ? "护照" : cellValue == "3" ? "军官证" : cellValue == "4" ? "台胞证" : "港澳台来往内地通行证";
    },
    //格式化性别方法
    sexFormat(row, column, cellValue, index) {
      //row当前行数据
      //column 列名称
      //cellValue 列的值
      //index 下标
      //alert(cellValue);
      return cellValue == 0 ? "男" : cellValue == 1 ? "女" : "未知";

    },
    zhFormat(row, column, cellValue, index) {
      //row当前行数据
      //column 列名称
      //cellValue 列的值
      //index 下标
      //alert(cellValue);
      return cellValue == 0 ? "正常" : "异常";
    },
    //处理每页数量发生变化
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //让每页数量发生变化
      this.pageSize = val;
      //重载数据
      this.loadData();
    },
    //处理当前页变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //让每页数量发生变化
      this.currentPage = val;
      //重载数据
      this.loadData();
    },
    //查询
    search() {
      this.loadData();
    },
    //刷新
    flush() {
      location.reload();
    }, //修改用户状态（禁用/启用）
    handleChangeStatus(index, row) {
      console.log(index, row);
      //确认框提示
          //让_this等于当前vue对象
          var _this = this;
          // alert(111);
          //赋值 $http官网代码  this.form =form:{deptName:'',description:'',status:1}
          _this.$http
            .post("/member/membercontroller/update", row) //指定请求的url及参数  get
            .then(function (response) {
              //判断返回值是否正确
              if (response.data.code == 2000) {
                //提示添加成功
                _this.$message({
                  message: "恭喜你，这是一条成功消息",
                  type: "success",
                });
                //重新加载数据
                _this.loadData();
              } else {
                //错误提示信息
                _this.$message.error("错了哦，这是一条错误消息");
              }
            })
            .catch(function (error) {
              //错误的处理
              // handle error
              console.log(error);
            })

        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style>
</style>
